<template>
  <view>
    <view class="topContent">
      <Home v-show="menuIndex == 0" />
      <Index v-show="menuIndex == 1" />
      <Administration v-show="menuIndex == 2" />
      <My v-show="menuIndex == 3" />
    </view>
    <!-- <u-tabbar v-model="menuIndex" :list="list" active-color="blue" inactive-color="black" @change="changeClick"></u-tabbar> -->
    <view class="btn_nav">
      <view class="btn_nav_item" v-for="(item, index) in list" :key="index" @click="changeClick(index)">
        <image :src="menuIndex==index ? item.imgb : item.img" class="img">
        </image>
        <span class="text" :class="{ 'active': menuIndex == index }">{{ item.name }}</span>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
  import Home from '@/components/home'
  import Index from '@/components/index'
  import Administration from '@/components/administration'
  import My from '@/components/my'

  const menuIndex = ref(0)
  menuIndex.value = uni.getStorageSync('menuIndex') || 0
  const list = ref([{
    name: '用户端首页',
    img: '../../static/tabbar/home.png',
    imgb: '../../static/tabbar/homeb.png',
  }, {
    name: '设计端首页',
    img: '../../static/tabbar/home.png',
    imgb: '../../static/tabbar/homeb.png',
  }, {
    name: '管理',
    img: '../../static/tabbar/home.png',
    imgb: '../../static/tabbar/homeb.png',
  }, {
    name: '我的',
    img: '../../static/tabbar/user.png',
    imgb: '../../static/tabbar/userb.png',
  }])

  const changeClick = (index) => {
    menuIndex.value = index
    uni.setStorageSync('menuIndex', index)
  }
</script>

<style lang="scss" scoped>
  .topContent {
    padding-bottom: 10rpx;
    width: 100%;
    height: calc(100vh - 120rpx);
    overflow: auto;

    &::-webkit-scrollbar {
      margin-right: 10rpx;
      width: 0rpx;
      height: 0rpx;
    }

    &::-webkit-scrollbar-track {
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }

    &::-webkit-scrollbar-thumb {
      background: #cccccc;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
  }

  .btn_nav {
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 120rpx;
    box-shadow: 0 0 5rpx #999999;
    background-color: #fff;

    .btn_nav_item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      flex: 1;

      .img {
        width: 60rpx;
        height: 60rpx;
      }

      .active {
        color: #206ef1;
      }

      .text {
        width: 100%;
        font-size: 24rpx;
        text-align: center;
      }
    }
  }
</style>